<!doctype html>
<html>
<head>
	<title>Chart: Events</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
	<script src="../../common/chartdata.js"></script>
<body>
    <div id="chartDiv" style="width:900px;height:200px;margin:20px"></div>
	<script>
        webix.ui({
            container:"chartDiv",
            rows:[
                {
                    cols:[
                        {
                            id:"chart",
                            view:"chart",
                            type:"bar",
                            value:"#sales#",
                            xAxis:{
                                template:"'#year#",
                                lines:false
                            },
                            barWidth:35,
                            radius:0,
                            gradient:"falling",
                            data: dataset
                        },
                        {
                            template:'<div id="log_div" style="widht:100%; height:100%; font-family:Tahoma;overflow:auto"></div>'
                        }
                    ]
                }
            ]
        });
        $$("chart").attachEvent("onMouseMove", function(id){
            id = this.getItem(id).year;
            log("onMouseMove", id);
            return true;
        });
        $$("chart").attachEvent("onMouseOut", function(ev){
            log("onMouseOut", ev);
            return true;
        });

        $$("chart").attachEvent("onItemClick", function(id){
            id = this.getItem(id).year;
            log("onItemClick", id);
            return true;
        });
        $$("chart").attachEvent("onItemDblClick", function(id){
            id = this.getItem(id).year;
            log("onItemDblClick", id);
            return true;
        });
        
        function log(name, id){
            var t = document.createElement("DIV");
            t.innerHTML = name+" for element "+id;

            var p = document.getElementById("log_div");
            p.insertBefore(t, p.firstChild);
        }
	</script>
</body>
</html>